 <template>
    <div>
        <el-row>
            <!--检索-->
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-input v-if="false" v-model="search.pageNo"></el-input>
                <el-input v-if="false" v-model="search.pageSize"></el-input>
                <el-col :span="4">
                    <el-input v-model="search.title" placeholder="订单号"></el-input>
                </el-col>

                <el-col :span="12"
                    ><div>
                        <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                        <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button>
                    </div>
                </el-col></el-form
            >

            <!--功能列表-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column align="center" type="index" label="#" sortable> </el-table-column>
                <el-table-column align="center" prop="memberId" label="会员ID"> </el-table-column>
                <el-table-column align="center" prop="orderNo" label="订单号" width="160px"> </el-table-column>
                 <el-table-column align="center" prop="createTime" label="创建记录时间" width="160px"> </el-table-column>
                <el-table-column align="center" prop="amountType" label="金额变化" width="160px">
                    <template  slot-scope="scope">
                        <el-tag type="success"  :type="getStatusColor(scope.row.amountType)">{{getStatusName(scope.row.amountType)}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="amount" label="金额"> </el-table-column>
                <el-table-column align="center" prop="changeType" label="积分变化">
                    <template  slot-scope="scope">
                        <el-tag type="success">{{scope.row.changeType === 1?'加':'减'}}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="changeCount" label="积分改变数量"> </el-table-column>
                <el-table-column align="center" prop="operateMan" label="操作人员"> </el-table-column>
                <el-table-column align="center" prop="operateNote" label="操作备注"> </el-table-column>

                <el-table-column align="center" prop="isPay" label="是否支付">
                    <template  slot-scope="scope">
                        <el-tag type="success"  :type="getStatusColo(scope.row.isPay)">{{getStatusNam(scope.row.isPay)}}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="sourceType" label="积分来源">
                    <template  slot-scope="scope">
                        <el-tag type="success">{{scope.row.changeType === 1?'参与官方活动':'自驾服务消费金额'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="status" label="支付类型">
                    <template  slot-scope="scope">
                        <el-tag type="success"  :type="getStatusC(scope.row.status)">{{getStatusN(scope.row.status)}}</el-tag>
                    </template>
                </el-table-column>


                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                       
                        <el-button size="small" @click="deleteInfo(scope.$index, scope.row)" icon="el-icon-delete" type="danger"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNo"
                :page-sizes="[5, 10, 20, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        
        </el-row>
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import Icon from '../../utils/Icon';
Vue.use(VueAxios, axios);

export default {
    components: { Icon },
    data() {
        return {
            tableData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            page: {},
            form: { status: '0' },
            search: { pageNo:1, pageSize:10},
            formLabelWidth: '80px',
            dialogTableVisible: false
        };
    },
    created: function () {
        this.load();
    },
    methods: {
        //初始化数据
        load() {
            //页面初始化时，加载的方法
            this.$http.post('client/opg/controller/list',this.search).then((response) => {
                console.log(response.data);
                this.tableData = response.data.data.list;
                this.total = response.data.data.total;
            });
        },
        getStatusNam(isPay) {
            var tmpType = '';
            if (isPay === 1) {
                tmpType = '已支付';
            }else if (isPay === 2) {
                tmpType = '订单失效';
            }else if (isPay === 0) {
                tmpType = '未支付';
            }
            return tmpType;
        },
        getStatusColo(isPay) {
            var tmpType = '';
            if(isPay==1){
                tmpType = 'success';
            }else if(isPay==0){
                tmpType = 'danger';
            }else if(isPay==2){
                tmpType = 'warning';
            }
            return tmpType;
        },
        getStatusN(status) {
            var tmpType = '';
            if (status === 1) {
                tmpType = '微信';
            }else if (status === 2) {
                tmpType = '支付宝';
            }
            return tmpType;
        },
        getStatusC(status) {
            var tmpType = '';
            if(status==1){
                tmpType = 'success';
            }else if(status==2){
                tmpType = '';
            }
            return tmpType;
        },
        getStatusName(amountType) {
            var tmpType = '';
            if (amountType === 1) {
                tmpType = '加';
            }else if (amountType === 2) {
                tmpType = '减';
            }
            return tmpType;
        },
        getStatusColor(amountType) {
            // return cellValue == 1 ? '启用' : '禁用';
            var tmpType = '';
            if(amountType==1){
                tmpType = 'success';
            }else if(amountType==2){
                tmpType = 'danger';
            }
            return tmpType;
        },
        //每页显示数量发生变化
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.search.pageSize = val;
            this.load();
        },
        //第几页发生变化
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.search.pageNo = val;
            this.load();
        },
        //查询
        searchBtn() {
            console.log(`当前页`);
            this.load();
        },
        emptyBtn() {
            this.search = {};
            this.search.pageNo =1;
            this.search.pageSize =10;
            this.load();
        },
        deleteInfo: function (index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var _this = this;
                    axios
                        .delete('client/opg/controller/delete?operId=' + row.operId)
                        .then(function (response) {
                            console.log(response);
                            if (response.status == 200) {
                                //重新加载数据
                                _this.load();
                                //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('你错了。。。');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        }
    }
};
</script>
<style>
</style>